<template>
  <div
    class="detail-outer"
    v-if="detailStore.detail">
    <div class="nav-bar">
      <div class="nav-container">
        <h2>{{ detailMsg.name }}</h2>
      </div>
    </div>
    <div class="detail">
      <div class="detail-container">
        <div class="img-left">
          <Swiper
            :type="'detail'"
            :swiperList="detailMsg.imageList"
            v-if="detailMsg.imageList"></Swiper>
        </div>
        <!-- 商品数据 -->
        <div class="product-con">
          <h2>{{ detailMsg.name }}</h2>
          <p class="sale-desc">
            {{ detailMsg.desc }}
          </p>
          <p class="company-info">小米自营</p>
          <!-- 价格 -->
          <div class="price-info">
            <span>
              {{ detailMsg.price }}元
              <del v-if="detailMsg.discount">{{ detailMsg.discount }}元</del>
            </span>
          </div>
          <!-- 线 -->
          <div class="line"></div>
          <!-- 地址 -->
          <div class="address-box">
            <div class="product-address">
              <i class="fa fa-map-marker"></i>
              <div class="address-con">
                <div>
                  <div class="address-info">
                    <span
                      v-for="(item, index) of addressArr"
                      :key="index">
                      {{ item }}
                    </span>
                  </div>
                  <a
                    @click.prevent="changeAddressShow"
                    href="javacript:;"
                    class="edit">
                    修改
                  </a>
                </div>
                <div class="info">
                  <div class="desc">
                    <span>{{ detailMsg.number! > 0 ? '有现货' : '缺货' }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 总配置 -->
          <div class="buy-option">
            <!-- 子配置 -->
            <div class="buy-box-child">
              <!-- 配置 -->
              <div class="option-box">
                <!-- title -->
                <div class="title">选择配置</div>
                <!-- 选项 -->
                <ul
                  class="clearfix"
                  @click="changeVersion">
                  <li
                    v-for="(m, index) of detailMsg.msgList"
                    :key="index"
                    :class="index === gIndex ? 'active' : ''">
                    <a
                      href="javascript:;"
                      :data-gindex="index">
                      {{ m.goods_version }}
                    </a>
                  </li>
                </ul>
              </div>
              <div class="option-box">
                <!-- title -->
                <div class="title">选择颜色</div>
                <!-- 选项 -->
                <ul
                  class="clearfix"
                  @click="changeColor">
                  <li
                    v-for="(m, index) of detailMsg.others"
                    :key="m.goodsInfo_id"
                    :class="index === cIndex ? 'active' : ''">
                    <a
                      href="javascript:;"
                      :data-cindex="index">
                      {{ m.goods_color }}
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- 信息 -->
          <div class="selected-list">
            <ul>
              <li>
                {{
                  `${detailMsg.name} ${detailMsg.msg?.goods_version} ${detailMsg.color}`
                }}
                <span>
                  {{ detailMsg.price }}元
                  <del v-if="detailMsg.discount">
                    {{ detailMsg.discount }}元
                  </del>
                </span>
              </li>
            </ul>
            <div class="total-price">总计：{{ detailMsg.price }}元</div>
          </div>
          <!-- 按钮 -->
          <div class="btn-box">
            <div class="sale-btn">
              <a
                @click.prevent="addCart"
                href="javascript:;"
                class="btn">
                加入购物车
              </a>
            </div>
          </div>
          <!-- 销售信息 -->
          <div class="after-sale-info">
            <span>
              <a href="javascript:;">
                <i class="fa fa-check-circle-o"></i>
                <em>小米自营</em>
              </a>
            </span>
            <span>
              <a href="javascript:;">
                <i class="fa fa-check-circle-o"></i>
                <em>小米发货</em>
              </a>
            </span>
            <span>
              <a href="javascript:;">
                <i class="fa fa-check-circle-o"></i>
                <em>7天无理由退货（到店自取拆封后不支持）</em>
              </a>
            </span>
            <span>
              <a href="javascript:;">
                <i class="fa fa-check-circle-o"></i>
                <em>运费说明</em>
              </a>
            </span>
            <span>
              <a href="javascript:;">
                <i class="fa fa-check-circle-o"></i>
                <em>企业信息</em>
              </a>
            </span>
            <span>
              <a href="javascript:;">
                <i class="fa fa-check-circle-o"></i>
                <em>7天价格保护</em>
              </a>
            </span>
          </div>
        </div>
      </div>
    </div>
    <Backdrop
      v-if="showBackdrop"
      ref="backdrop">
      <Address
        ref="address"
        :isShow="true"
        :changeAddressShow="changeAddressShow"></Address>
    </Backdrop>
  </div>
</template>

<script setup lang="ts">
import useStore from '@/store'
import { computed, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import Backdrop from '@/components/backdrop/index.vue'
import Address from '@/components/address/index.vue'
import Swiper from '@/components/swiper/index.vue'
const {
  addressStore: { addressArr },
  detailStore,
  cartStore
} = useStore()
const router = useRouter()
const route = useRoute()
watch(
  () => route.query,
  (newValue, oldValue) => {
    detailStore.getGoodsDetail(Number(newValue.goods_id))
    detailStore.getGoodsImageList(Number(newValue.goods_id))
  },
  { immediate: true }
)
const showBackdrop = ref<boolean>(false)
const backdrop = ref<InstanceType<typeof Backdrop>>()
const address = ref<InstanceType<typeof Address>>()
const changeAddressShow = () => {
  showBackdrop.value = !showBackdrop.value
}
const gIndex = ref<number>(0)
const cIndex = ref<number>(0)
const detailMsg = computed(() => {
  return {
    name: detailStore.detail?.goods_name,
    id: detailStore.detail?.goods_id,
    desc: detailStore.detail?.goods_desc,
    msgList: detailStore.detail?.msg,
    msg: detailStore.detail?.msg[gIndex.value],
    others: detailStore.detail?.msg[gIndex.value].others,
    goodsInfo_id:
      detailStore.detail?.msg[gIndex.value].others[cIndex.value].goodsInfo_id,
    color:
      detailStore.detail?.msg[gIndex.value].others[cIndex.value].goods_color,
    price:
      detailStore.detail?.msg[gIndex.value].others[cIndex.value].goods_price,
    number:
      detailStore.detail?.msg[gIndex.value].others[cIndex.value].goods_number,
    discount:
      detailStore.detail?.msg[gIndex.value].others[cIndex.value].goods_discount,
    imageList: detailStore.imageList
  }
})
const changeVersion = (e: MouseEvent) => {
  if ((e.target as HTMLElement).nodeName.toLocaleLowerCase() === 'a') {
    if (detailMsg.value.others) {
      if (cIndex.value < detailMsg.value.others?.length) {
        gIndex.value = Number((e.target as HTMLElement).dataset.gindex)
        cIndex.value = 0
      }
    } else {
      gIndex.value = Number((e.target as HTMLElement).dataset.gindex)
    }
  }
}
const changeColor = (e: MouseEvent) => {
  if ((e.target as HTMLElement).nodeName.toLocaleLowerCase() === 'a') {
    cIndex.value = Number((e.target as HTMLElement).dataset.cindex)
  }
}
const addCart = async () => {
  if (detailMsg.value.goodsInfo_id) {
    const result = await cartStore.saveGoodsInLocalStorage({
      goodsInfo_id: detailMsg.value.goodsInfo_id,
      goods_count: 1,
      goods_checked: true
    })
    if (result > 0) {
      sessionStorage.setItem(
        'goodsMsg',
        `${detailMsg.value.name} ${detailMsg.value.msg?.goods_version} ${detailMsg.value.color}`
      )
      router.push('success')
    } else {
      console.log(result)
    }
  }
}
</script>

<style lang="less" scoped>
.active {
  border: 1px solid #ff6700 !important;
  a {
    color: #ff6700 !important;
  }
}
.detail-outer {
  position: relative;
  .nav-bar {
    position: sticky;
    top: 0px;
    height: 63px;
    width: 100%;
    color: #616161;
    background: #fff;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 5px 5px rgb(0 0 0 / 7%);
    z-index: 99;
    .nav-container {
      width: 1226px;
      margin: 0 auto;
      h2 {
        margin: 0;
        font-size: 18px;
        font-weight: 400;
        line-height: 60px;
        color: #424242;
        float: left;
      }
    }
  }
  .detail {
    .detail-container {
      display: flex;
      padding-top: 32px;
      padding-bottom: 12px;
      width: 1226px;
      margin: 0 auto;
      .img-left {
        width: 606px;
        img {
          width: 560px;
          height: 560px;
        }
      }
      .product-con {
        margin-left: 20px;
        flex: 1;
        h2 {
          margin: 0;
          padding: 0;
          font-size: 24px;
          font-weight: 400;
          color: #212121;
        }
        .sale-desc {
          color: #b0b0b0;
          margin: 0;
          padding: 0;
          padding-top: 8px;
          line-height: 1.5;
        }
        .company-info {
          color: #ff6700;
          margin-bottom: 0;
          margin-top: 14px;
        }
        .price-info {
          display: block;
          font-size: 18px;
          line-height: 1;
          color: #ff6700;
          padding: 12px 0 10px;
          span {
            display: inline-block;
            font-size: 18px;
            line-height: 1;
            color: #ff6700;
          }
          del {
            font-size: 14px;
            margin-left: 5px;
            color: #b0b0b0;
          }
        }
        .line {
          margin-top: 12px;
          border-bottom: 1px solid #e0e0e0;
        }
        .address-box {
          margin: 20px 0;
          .product-address {
            padding: 30px 50px;
            position: relative;
            background: #fafafa;
            border: 1px solid #e0e0e0;
            i {
              position: absolute;
              left: 20px;
              top: 30px;
              font-size: 20px;
              color: #999;
            }
            .address-con {
              .address-info {
                display: inline-block;
                span {
                  display: inline;
                  margin-right: 14px;
                }
              }
              .edit {
                color: #ff6700;
                margin: 0;
              }
              .info {
                .desc {
                  span {
                    color: #ff6700;
                    margin: 0;
                  }
                }
              }
            }
          }
        }
        .buy-option {
          // 子配置
          .buy-box-child {
            margin-bottom: 30px;
            position: relative;
            .option-box {
              .title {
                font-size: 18px;
              }
              ul {
                li {
                  float: left;
                  margin-right: 12px;
                  margin-top: 10px;
                  line-height: 42px;
                  height: 42px;
                  position: relative;
                  border: 1px solid #e0e0e0;
                  list-style: none;
                  cursor: pointer;
                  transition: all 0.2s ease;
                  width: 283px;
                  font-size: 16px;
                  text-align: center;
                  a {
                    display: block;
                    color: #757575;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    box-sizing: border-box;
                    padding: 0 5px;
                  }
                }
              }
            }
          }
        }
        // 信息
        .selected-list {
          background: #f9f9fa;
          padding: 30px;
          margin-bottom: 30px;
          ul {
            li {
              list-style: none;
              line-height: 30px;
              color: #616161;
              span {
                float: right;
              }
            }
          }
          .total-price {
            color: #ff6700;
            font-size: 24px;
            padding-top: 20px;
          }
        }
        // 按钮
        .btn-box {
          margin: 10px 0 20px 0;
          .sale-btn {
            display: inline-block;
            margin-right: 10px;
            .btn {
              display: block;
              width: 298px;
              height: 52px;
              line-height: 52px;
              font-size: 16px;
              text-align: center;
              background: #ff6700;
              border-color: #ff6700;
              color: #fff;
              transition: 0.5s;
              &:hover {
                background: #f25807;
                border-color: #f25807;
              }
            }
          }
          .favorite-btn {
            display: inline-block;
            vertical-align: top;
          }
        }
        // 销售信息
        .after-sale-info {
          span {
            display: inline-block;
            a {
              display: inline-block;
              margin-right: 15px;
              line-height: 30px;
              margin-bottom: 10px;
              cursor: default;
              white-space: nowrap;
              color: #b0b0b0;
              i {
                font-size: 20px;
                display: inline-block;
                font-style: normal;
                vertical-align: middle;
              }
              em {
                font-style: normal;
                display: inline-block;
                margin-left: 2px;
                vertical-align: middle;
              }
            }
          }
        }
      }
    }
  }
}
</style>
